<template>
	<view class="weight-page">

		<!-- 分类选项卡 -->
		<view class="tabs">
			<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', currentTab === index ? 'active' : '']"
				@click="switchTab(index)">
				{{ tab }}
			</view>
		</view>

		<!-- 记录列表 -->
		<scroller @init="initScroller" @down="refreshData" @up="loadMoreData" :up="optUp" :fixed="false">
			<view v-for="(group, month) in groupedRecords" :key="month" class="month-group">
				<view class="month-title">{{ formatMonth(month) }}</view>
				<view v-for="(record, index) in group" :key="index" class="record-item">
					<view class="record-main">
						<text class="value">体重：{{ record.weight }}kg</text>
						<text>BMI：{{ record.bmi }}%</text>
					</view>
					<view class="record-sub">
						<text>身高：{{ record.height }}CM</text>
						<text>上传方式：{{ record.sourceName }}</text>
					</view>
					<view class="record-details">
						<text>测量时间：{{ record.measuredTime }}</text>
						<text>上传时间：{{ formatTime(record.uploadTime) }}</text>
					</view>
					<view class="status-tag" :style="{background: record.color}">{{ record.tag}}</view>
				</view>
			</view>
		</scroller>
	</view>
</template>

<script>
	import scroller from '@/components/scroller/scroller.vue';
	import {
		listWeight
	} from '@/api/healthData/everyWeight.js'

	export default {
		components: {
			scroller
		},
		data() {
			return {
				queryParam: {},
				tabs: ['全部', '异常', '正常'],
				currentTab: 0,
				records: [],
				userId: this.$store.state.user.userId,
				scroller: {},
				optUp: {
					onScroll: true, //监听滚动事件
					page: {
						size: 10 //每页加载10条
					}
				}
			}
		},
		computed: {
			groupedRecords() {
				const groups = {}
				this.records.forEach(record => {
					const date = new Date(record.measuredTime)
					const month = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}`
					
					if (!groups[month]) {
						groups[month] = []
					}
					groups[month].push(record)
				})
				return groups
			}
		},
		onShow() {

		},
		onLoad() {
			this.loadData()
		},
		methods: {
			/*初始化滚动*/
			initScroller(scroller) {
				this.scroller = scroller;
			},
			/*刷新数据*/
			refreshData() {
				this.loadData()
			},
			/*加载数据*/
			loadData() {
				this.records = [];
				this.scroller.resetUpScroll();
			},
			switchTab(index) {
				this.currentTab = index
				if(index===0){
					this.queryParam.tag=''
					this.loadData()
				}else if(index===2){
					this.queryParam.tag='正常'
					this.loadData()
				}else if(index===1){
					this.queryParam.tag='异常'
					this.loadData()
				}
			},
			formatMonth(month) {
				const [year, monthNum] = month.split('-')
				return `${year}年${parseInt(monthNum)}月`
			},
			formatTime(timeStr) {
				if (!timeStr) return ''
				const date = new Date(timeStr)
				const year = date.getFullYear()
				const month = (date.getMonth() + 1).toString().padStart(2, '0')
				const day = date.getDate().toString().padStart(2, '0')
				const hour = date.getHours().toString().padStart(2, '0')
				const minute = date.getMinutes().toString().padStart(2, '0')
				return `${year}/${month}/${day} ${hour}:${minute}`
			},
			async loadMoreData() {
				this.queryParam.pageNum = this.scroller.num
				this.queryParam.pageSize = this.scroller.size
				this.queryParam.userId = this.userId
				
				const { rows, total } = await listWeight(this.queryParam)
				this.records = this.records.concat(rows);
				this.$forceUpdate();
				this.scroller.endBySize(rows.length, total);
				uni.stopPullDownRefresh();
				uni.hideLoading();
			}
		}
	}
</script>

<style scoped>
	.weight-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.tabs {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		padding: 0 20rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #4cd080;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #4cd080;
		border-radius: 2rpx;
	}

	.record-list {
		height: calc(100vh - 88rpx);
		padding: 20rpx;
	}

	.month-group {
		margin-bottom: 40rpx;
	}

	.month-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.record-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		padding-right: 60px;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;
	}

	.record-main {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
		font-size: 14px;
	}

	.record-main .value {
		color: #333;
		font-size: 14px;
		font-weight: normal;
	}

	.record-sub {
		display: flex;
		justify-content: space-between;
		color: #666;
		font-size: 14px;
		margin-bottom: 5px;
	}

	.record-details {
		display: flex;
		justify-content: space-between;
		color: #999;
		font-size: 10px;
		flex-wrap: nowrap;
		gap: 10px;
	}

	.status-tag {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 35px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 13px;
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		writing-mode: vertical-lr;
		letter-spacing: 2px;
		padding: 10px 0;
	}
</style>
